// 使用与头部筛选
import React from 'react';
import {withRouter} from 'react-router-dom';
import {Input, Form, DatePicker, Row, Col, Button, Select} from 'antd';
import moment from 'moment';
import PartyerIcon from '@assets/icons/parter-icon.png';

import './scss/index.scss';

const FormItem = Form.Item;
const Option = Select.Option;

class PageTopFilter extends React.Component {

    submitForm() {
        let formInfo = this.props.form.getFieldsValue();
        if (formInfo.time) {
            formInfo.time = moment(formInfo.time).format('YYYY-MM-DD');
        }
        this.props.submitForm(formInfo);
    }

    otherBtnEvent() {
        this.props.cancelForm()
    }

    renderForm() {
        const {filters, buttons = []} = this.props;
        const {getFieldDecorator} = this.props.form;
        const formItemLayout = {
            labelCol: {
                span: 8
            },
            wrapperCol: {
                span: 16
            }
        };
        if (!filters || !filters.length)
            return null;
        return (
            <div className="form-area">
                <Form layout="horizontal">
                    <div className="row-line">
                        <Row>
                            {
                                filters.map((item, index) => {
                                    let itemFilter = null;
                                    let {type, label, placeholder, options = {}} = item;
                                    if (type === 'time') {
                                        itemFilter = (
                                            <Col span={12} key={index}>
                                                <FormItem label={label || '时间'} {...formItemLayout}>
                                                    {
                                                        getFieldDecorator('time', {})(
                                                            <DatePicker
                                                                placeholder={placeholder ? placeholder : `请选择时间`}
                                                                format="YYYY-MM-DD"
                                                            />
                                                        )
                                                    }
                                                </FormItem>
                                            </Col>
                                        )
                                    } else if (type === 'select'){
                                        itemFilter = (
                                            <Col span={12} key={index}>
                                                <FormItem label={label || '类型'} {...formItemLayout}>
                                                    {
                                                        getFieldDecorator(item.name, {})(
                                                            <Select placeholder={placeholder ? placeholder : `请先择`}>
                                                                {
                                                                    // options.map((item, index) => {
                                                                    //     return (
                                                                    //         <Option value={index} key={index}>{item}</Option>
                                                                    //     )
                                                                    // })
                                                                    Object.keys(options).map((item, index) => {
                                                                        return (
                                                                            <Option value={options[item].id} key={index}>{options[item].name}</Option>
                                                                        )
                                                                    })

                                                                }
                                                            </Select>
                                                        )
                                                    }
                                                </FormItem>
                                            </Col>
                                        )
                                    } else {
                                        itemFilter = (
                                            <Col span={12} key={index}>
                                                <FormItem label={label} {...formItemLayout}>
                                                    {
                                                        getFieldDecorator(item.name || `option_${index + 1}`, {
                                                            rules: item.rules ? item.rules: []
                                                        })(
                                                            <Input placeholder={placeholder ? placeholder : `请输入${label}`}/>
                                                        )
                                                    }
                                                </FormItem>
                                            </Col>
                                        )
                                    }
                                    return itemFilter;
                                })
                            }
                        </Row>
                    </div>

                    <div className="filter-btn">
                        <FormItem wrapperCol={{align: 'center'}}>
                            <Button type="primary"
                                    style={{padding: '0 25px', marginRight: '25px'}}
                                    onClick={() => this.submitForm()}
                            >{!buttons[0] ? '查询' : buttons[0]}</Button>
                            {
                                buttons[1] === false
                                    ? null
                                    : <Button style={{padding: '0 25px'}}
                                              onClick={() => this.otherBtnEvent()}
                                    >{!buttons[1] ? '新增' : buttons[1]}</Button>
                            }

                        </FormItem>
                    </div>
                </Form>
            </div>
        )
    }

    render() {
        let {title} = this.props;
        return (
            <div className="page-top-filter">
                <div className="page-title">
                    <div className="title-content">
                        <img className="title-img" src={PartyerIcon} alt=""/>
                        <span className="title-name">{title}</span>
                    </div>
                </div>
                { this.renderForm() }
            </div>
        )
    }
}

PageTopFilter = Form.create({})(PageTopFilter);

export default withRouter(PageTopFilter);